// 路由的配置文件
import { App } from "vue";

// 从 vue-router 插件包中引入 createRouter 的方法
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import LoginView from '../views/login/LoginView.vue'
import MainView from "../views/main/MainView.vue";
import HomeView from "../views/home/HomeView.vue";
import NotFound from "../views/404/NotFound.vue";

import UsersView from "../views/users/list/UsersView.vue";
import UsersGroup from "../views/users/group/UsersGroup.vue";
import CouriersList from "../views/settings/couriers/CouriersList.vue";
import ProductsClassify from "@/views/products/classify/ProductsClassify.vue";
import ProductsList from "@/views/products/list/ProductsList.vue";
import ProductsHandle from "@/views/products/list/ProductsHandle.vue";
import PermissionMenus from "@/views/permissions/menus/PermissionMenus.vue";
import PermissionRoles from "@/views/permissions/roles/PermissionRoles.vue";
import PermissionAdmins from '@/views/permissions/admins/PermissionAdmins.vue'
import { useAdminStore } from "@/store/admin";

const routes: RouteRecordRaw[] = [
    // 每一个页面路由，就是一个对象
    {
        path: '/login',        // 路由路径（名字是自己定义的）
        component: LoginView,   // 路由组件
        name: 'Login',
        // beforeEnter: (to, from) => {
        //     // reject the navigation
        //     // return false
        // },
    },
    {
        path: '/',
        component: MainView,
        name: 'MainView',
        // 配置二级路由
        // children: [
        //     {
        //         path: 'home',
        //         component: HomeView
        //     },
        //     // 用户管理
        //     {
        //         path: 'users/list',
        //         component: UsersView
        //     },
        //     // 用户分组
        //     {
        //         path: 'users/group',
        //         component: UsersGroup
        //     },
        //     {
        //         path: 'settings/couriers',
        //         component: CouriersList
        //     },
        //     {
        //         path: 'products/classify',
        //         component: ProductsClassify
        //     },
        //     {
        //         path: 'products/list',
        //         component: ProductsList
        //     },
        //     {
        //         path: 'products/add',
        //         component: ProductsHandle
        //     },
        //     {
        //         path: 'products/update/:_id?',
        //         component: ProductsHandle
        //     },
        //     {
        //         path: 'settings/permission/menus',
        //         component: PermissionMenus
        //     },
        //     {
        //         path: 'settings/permission/roles',
        //         component: PermissionRoles
        //     },
        //     {
        //         path: 'settings/permission/admins',
        //         component: PermissionAdmins
        //     }
        // ]
    },
    // 和前面所有路由都匹配不上时，就会匹配404路由
    {
        path: '/:pathMatch(.*)*',
        component: NotFound
    }
]

const router = createRouter({
    // routes：用来进行项目中所有页面的路由配置
    routes,

    // history：配置路由模式
    // createWebHistory() 表示 history 模式
    // createWebHashHistory() 表示 hash 模式
    history: createWebHistory()
});

// 路由白名单(不用登录可以直接访问的页面)
const WHITE_LIST = ['/login'];

let isAdded = false;

// 全局前置守卫
router.beforeEach(async (to, from) => {
    if (WHITE_LIST.includes(to.path)) {
        // 进入if，表示当前访问的页面【属于】白名单页面
        return true;
    }
    // 如果代码执行到这一行，就表示当前访问的页面【不属于】白名单页面
    // 判断用户是否登录
    const token = localStorage.user_token;
    if (!token) {
        // 进入 if，则表示当前访问的页面需要先登录才能进入，但是用户没有登录
        return { path: '/login', replace: true };
    }

    // 如果代码执行到这一行，说明用户访问的是系统内部页面，并且用户登录了
    /**
     * 1. 调用状态机中公共的请求（发送请求获取权限数据）
     * 2. 根据请求结果动态添加路由配置
     */
    const adminStore = useAdminStore();
    const permissions = await adminStore.getAdminInfoAsync();

    if (permissions && !isAdded) {

        routesDataFormat(permissions).forEach(item => {
            // MainView 是父级路由的 name 值
            router.addRoute('MainView', {
                path: item.path,
                // 懒加载
                component: () => import('../views' + item.component + '.vue')
            })
        })
        // console.log(router.getRoutes());
        
        isAdded = true;

        return {
            ...to,
            replace: true
        }
    }

})


const routesDataFormat = (permissions: MenuItem[]): MenuItem[] => {
    return permissions.reduce((prev: MenuItem[], item: MenuItem) => {
        if (item.children) {
            // 判断 children 中是否包含 menu 类型的数据
            const hasMenu = item.children.some(child => child.type == 'menu');
            if (hasMenu) {
                // children 中有 menu 类型，说明当前 item 是一级菜单，不参与路由配置
                return [
                    ...prev,
                    ...routesDataFormat(item.children)
                ]
            }
            // children 中全都是 button 类型，说明当前 item 没有子菜单，要参与路由配置
            return [
                ...prev,
                item,
                ...routesDataFormat(item.children)
            ]
        }
        // 如果 item.component 存在，说明 item 要参与路由配置
        if (item.component) {
            return [
                ...prev,
                item
            ]
        }
        return prev;
    }, [])
}


export const setupRouter = (app: App<Element>) => {
    app.use(router)
}


// 将私有变量 router 暴露出去给其他文件使用
// export default router;